<template>
<div v-title data-title="用户注册">
  <el-col :span="12" :offset="6">
        <div class="grid-content bg-purple" style="margin-top: 60px;">
          <el-card style="width: 450px; margin: auto;  text-align: center;">
            <h3>用户注册</h3>
            <el-divider></el-divider>
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="昵称:" prop="nickname">
				  <el-input  v-model="ruleForm.nickname" prefix-icon="el-icon-user-solid" placeholder="请输入昵称" autocomplete="off"></el-input>
				</el-form-item>
              <el-form-item label="用户名:" prop="username">
                <el-input  v-model="ruleForm.username" prefix-icon="el-icon-user" placeholder="请输入用户名" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="密码:" prop="password">
                <el-input type="password" v-model="ruleForm.password" prefix-icon="el-icon-lock" show-password  placeholder="请输入密码" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="确认密码:" prop="checkPass">
                <el-input type="password" v-model="ruleForm.checkPass" show-password placeholder="请确认密码" autocomplete="off"></el-input>
              </el-form-item>
			  <el-form-item label="手机:" prop="phone">
			    <el-input  v-model="ruleForm.phone" prefix-icon="el-icon-phone" placeholder="请输入手机号" autocomplete="off"></el-input>
			  </el-form-item>
			  <el-form-item label="邮箱:" prop="email">
			    <el-input  v-model="ruleForm.email" prefix-icon="el-icon-message" placeholder="请输入邮箱" autocomplete="off"></el-input>
			  </el-form-item>
              <el-form-item>
                <el-button style="width: 170px;" type="primary" @click="submitForm('ruleForm')">立 即 注 册</el-button>
                <el-button @click="resetForm('ruleForm')">重 置</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </div>
  </el-col>
</div>
</template>
<script>
export default {
  name: "Register",
  data() {
	  
	  var validatePass = (rule, value, callback) => {
	    if (value === '') {
	      callback(new Error('请再次输入密码'));
	    } else if (value !== this.ruleForm.password) {
	      callback(new Error('两次输入密码不一致!'));
	    } else {
	      callback();
	    }
	  };
	  
    return {
      ruleForm: {
		  //
		nickname: '',
		//
        username: '',
		//
        password: '',
		//
		checkPass: '',
		//
		phone: '',
		//
		email: '',
      },
      rules: {
		  
		nickname: [
			{ required: true, message: '请输入昵称', trigger: 'blur' },
			{ min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
		],
		
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ],
		
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
		  { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ],
		
		checkPass: [
		  {required: true, validator: validatePass, trigger: 'blur'}
		],
		
		phone: [
		  { required: true, message: '请输入手机号', trigger: 'blur' },
		  {  max: 11, message: '长度在 11 个字符', trigger: 'blur' }
		],
		
		email: [
		  { required: true, message: '请输入邮箱', trigger: 'blur' },
		  { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
		],
		
      },
	  
    };
  },
  methods: {
    submitForm(formName) {
		this.$refs[formName].validate((valid) => {
		  if (valid) {
			this.$axios.post('/register', this.ruleForm).then(res => {
				
				this.$message({
				  message: '注册成功',
				  type: 'success'
				})
				
				this.$router.push("/login")
		})
		  } else {
			console.log('error submit!!');
			return false;
		  }

		})

    },
	

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

  }
  
}
</script>


<style>

</style>
